﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:wb="http://open.weibo.com/wb">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>关于本站</title>
    <link rel="shortcut icon" href="/img/Logo_40.png" type="image/x-icon">
    <!--Layui-->
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <!--font-awesome-->
    <link href="/plugns/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!--全局样式表-->
    <link href="/css/global.css" rel="stylesheet"/>
    <!-- 本页样式表 -->
    <link href="/css/about.css" rel="stylesheet"/>
</head>
<body>
<!-- 导航 -->
<nav class="blog-nav layui-header">
    <div class="blog-container" th:if="${thirdLoginUser!=null}">
        <!-- QQ互联登陆 -->
        <a class="blog-user" href="javascript:void(0);" onclick="qqloginOut()">
            <img th:src="@{${thirdLoginUser.avatar}}" alt="点我退出" title="点我退出"/>
            <cite id="nickName" class="layui-hide-xs" th:text="${thirdLoginUser.nickName}"></cite>
        </a>
        <!-- 导航菜单 -->
        <ul class="layui-nav" lay-filter="nav">
            <li class="layui-nav-item layui-this">
                <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                <dl class="layui-nav-child">
                    <dd><a href="/blog/toResource?categoryName=图片">图片</a></dd>
                    <dd><a href="/blog/toResource?categoryName=源码">源码</a></dd>
                    <dd><a href="/blog/toResource?categoryName=电子书">电子书</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toTimeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
            </li>
        </ul>
        <!-- 手机和平板的导航开关 -->
        <a class="blog-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>
    </div>
    <div class="blog-container" th:if="${thirdLoginUser==null}">
        <!-- QQ互联登陆 -->
        <a href="javascript:void(0);" onclick="logins()" class="blog-user">
            <i class="fa fa-qq"></i>
        </a>
        <!-- 不落阁 -->
        <a class="blog-logo" href="">墨殇</a>
        <!-- 导航菜单 -->
        <ul class="layui-nav" lay-filter="nav">
            <li class="layui-nav-item ">
                <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                <dl class="layui-nav-child">
                    <dd><a href="/blog/toResource?categoryName=图片">图片</a></dd>
                    <dd><a href="/blog/toResource?categoryName=源码">源码</a></dd>
                    <dd><a href="/blog/toResource?categoryName=电子书">电子书</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toTimeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
            </li>
        </ul>
        <!-- 手机和平板的导航开关 -->
        <a class="blog-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>
    </div>
</nav>
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
            <a href="/blog/toHome" title="网站首页">网站首页</a>
            <a><cite>关于本站</cite></a>
        </blockquote>
        <div class="blog-main">
            <div class="layui-tab layui-tab-brief shadow" lay-filter="tabAbout">
                <ul class="layui-tab-title">
                    <li lay-id="1">关于博客</li>
                    <li lay-id="2">关于作者</li>
                    <li lay-id="3" id="frinedlink">友情链接</li>
                    <li lay-id="4">留言墙</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item">
                        <div class="aboutinfo">
                            <div class="aboutinfo-figure">
                                <img src="http://minghaozhi.oss-cn-beijing.aliyuncs.com/image/user.jpg" width="100"
                                     height="100" alt="墨殇"/>
                            </div>
                            <p class="aboutinfo-nickname">墨殇</p>
                            <p class="aboutinfo-introduce">程序猿一枚</p>
                            <p class="aboutinfo-location"><i class="fa fa-link"></i>&nbsp;&nbsp;<a target="_blank"
                                                                                                   href="moshang.work/blog">moshang.work</a>
                            </p>
                            <hr/>
                            <div class="aboutinfo-contact">
                                <a target="_blank" title="网站首页" href="/blog/toHome"><i class="fa fa-home fa-2x"
                                                                                       style="font-size:2.5em;position:relative;top:3px"></i></a>
                                <a target="_blank" title="文章专栏" href="/blog/toArticle"><i
                                        class="fa fa-file-text fa-2x"></i></a>
                                <a target="_blank" title="资源分享" href="/blog/toResource"><i class="fa fa-tags fa-2x"></i></a>
                                <a target="_blank" title="点点滴滴" href="/blog/toTimeline"><i
                                        class="fa fa-hourglass-half fa-2x"></i></a>
                            </div>

                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>简介</legend>
                                <div class="layui-field-box aboutinfo-abstract">
                                    <p style="text-align:center;">该系统是由java开发的</p>
                                    <h1>第一个版本</h1>
                                    <p>诞生的版本，采用springboot+layui，前端套用开源的模板,具体的地址记不清了，由于前端技术水平有限，故视觉体验是比较差的。</p>
                                    <h1>作用</h1>
                                    <p>
                                        想自己动手做一个博客网站，把自己的笔记和有用的东西记录上去</p>
                                    <h1 style="text-align:center;">The End</h1>
                                </div>
                            </fieldset>
                        </div>
                    </div><!--关于网站End-->
                    <div class="layui-tab-item">
                        <div class="aboutinfo">
                            <div class="aboutinfo-figure">
                                <img src="http://minghaozhi.oss-cn-beijing.aliyuncs.com/image/user.jpg" width="100"
                                     height="100" alt="墨殇"/>
                            </div>
                            <p class="aboutinfo-nickname">墨殇</p>
                            <p class="aboutinfo-introduce">一枚90后程序员</p>
                            <p class="aboutinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;北京</p>
                            <hr/>
                            <div class="aboutinfo-contact">
                                <a target="_blank"
                                   href="tencent://message/?uin=597575122&Site=www.moshang.work&Menu=yes"
                                   title="QQ交流"><i class="fa fa-qq fa-2x"></i></a>
                                <a target="_blank" title="给我写信" href="javascript:layer.msg('启动邮我窗口')"><i
                                        class="fa fa-envelope fa-2x"></i></a>
                                <a target="_blank" title="新浪微博" href="https://weibo.com/u/2402978411/home?wvr=5&lf=reg"><i
                                        class="fa fa-weibo fa-2x"></i></a>
                                <a target="_blank" title="码云" href="https://gitee.com/minghaozhi/events"><i
                                        class="fa fa-git fa-2x"></i></a>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>简介</legend>
                                <div class="layui-field-box aboutinfo-abstract abstract-bloger">
                                    <p style="text-align:center;">目前从事java开发</p>
                                    <h1>个人信息</h1>
                                    <p>暂无</p>
                                    <h1>个人介绍</h1>
                                    <p>一个没有故事的男同学，没什么介绍......</p>
                                    <h1 style="text-align:center;">The End</h1>
                                </div>
                            </fieldset>
                        </div>
                    </div><!--关于作者End-->
                    <div class="layui-tab-item">
                        <div class="aboutinfo">
                            <div class="aboutinfo-figure">
                                <img src="http://minghaozhi.oss-cn-beijing.aliyuncs.com/image/user.jpg" width="100"
                                     height="100" alt="友情链接"/>
                            </div>
                            <p class="aboutinfo-nickname">友情链接</p>
                            <p class="aboutinfo-introduce">
                                Name：墨殇&nbsp;&nbsp;&nbsp;&nbsp;Site：http://moshang.work/blog</p>
                            <p class="aboutinfo-location">
                                <i class="fa fa-close"></i>有时宕机&nbsp;
                                <i class="fa fa-close"></i>不合法规&nbsp;
                                <i class="fa fa-close"></i>插边球站&nbsp;
                                <i class="fa fa-close"></i>红标报毒&nbsp;
                                <i class="fa fa-check"></i>原创优先&nbsp;
                                <i class="fa fa-check"></i>技术优先
                            </p>
                            <hr/>
                            <div class="aboutinfo-contact">
                                <p style="font-size:2em;">互换友链，携手并进！</p>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>Friend Link</legend>
                                <div class="layui-field-box">
                                    <ul class="friendlink">
                                        <li>
                                            <a target="_blank" href="http://www.layui.com/" title="Layui"
                                               class="friendlink-item">
                                                <p class="friendlink-item-pic"><img
                                                        src="http://www.layui.com/favicon.ico" alt="Layui"/></p>
                                                <p class="friendlink-item-title">Layui</p>
                                                <p class="friendlink-item-domain">layui.com</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </fieldset>
                        </div>
                    </div><!--友情链接End-->
                    <div class="layui-tab-item">
                        <div class="aboutinfo">
                            <div class="aboutinfo-figure">
                                <img src="/img/messagewall.png" alt="留言墙"/>
                            </div>
                            <p class="aboutinfo-nickname">留言墙</p>
                            <p class="aboutinfo-introduce">本页面可留言、吐槽、提问。欢迎灌水，杜绝广告！</p>
                            <p class="aboutinfo-location">
                                <i class="fa fa-clock-o"></i>&nbsp;<span id="time"></span>
                            </p>
                            <hr/>
                            <div class="aboutinfo-contact">
                                <p style="font-size:2em;">沟通交流，拉近你我！</p>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>Leave a message</legend>
                                <div class="layui-field-box">
                                    <div class="leavemessage" style="text-align:initial">
                                        <form class="layui-form blog-editor" action="">
                                            <div class="layui-form-item">

                                  <textarea class="layui-textarea" id="LAY_demo1" name="content" lay-verify="content" style="display: none">
                                                   </textarea>
                                            </div>
                                            <div class="layui-form-item" th:if="${thirdLoginUser==null}">
                                                <a class="layui-btn" href = "javascript:void(0);" onclick ="logins()"  >请先登录</a>
                                            </div>
                                            <div class="layui-form-item" th:if="${thirdLoginUser!=null}">
                                                <input type="hidden" name="name" id="userNmame" th:value="${thirdLoginUser.nickName}">
                                                <input type="hidden" name="image" id="avatar" th:value="${thirdLoginUser.avatar}">
                                                <input type="hidden" name="type" th:value="2">
                                                <button class="layui-btn" lay-submit="formLeaveMessage"
                                                        lay-filter="formLeaveMessage">提交留言
                                                </button>
                                            </div>
                                        </form>
                                        <ul class="blog-comment" id="articleComments" page-count="1"></ul>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div><!--留言墙End-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer class="blog-footer">
    <wb:share-button addition="simple" type="button" language="zh_cn"></wb:share-button>
    <p><span>Copyright</span><span>&copy;</span><span>2018-2019</span><a href="http://www.moshang.work">墨殇</a><span>Design By moshang</span>
    </p>
    <p><a href="http://www.miibeian.gov.cn/" target="_blank">豫ICP备18034337号</a><a href="/toLogin"
                                                                                  target="_blank">后台登录管理</a></p>
</footer>
<!--侧边导航-->
<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
    <li class="layui-nav-item layui-this">
        <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/toTimeline"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
    </li>
</ul>
<!--分享窗体-->
<div class="blog-share layui-hide">
    <div class="blog-share-body">
        <div style="width: 200px;height:100%;">
            <div class="bdsharebuttonbox">
                <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="blog-mask animated layui-hide"></div>
<!-- layui.js -->
<script src="/layui/layui.js"></script>
<!-- 全局脚本 -->
<script src="/js/web/global.js"></script>
<!-- 本页脚本 -->
<script src="/js/web/about.js"></script>
</body>
<script th:inline="javascript" type="text/javascript">
    var shareIndex, $;
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['layer', 'form', 'table', 'jquery', 'laypage', 'common','layedit','flow'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layedit = layui.layedit,
            flow=layui.flow,
            laypage = layui.laypage;
        layedit.set({
            uploadImage: {
                url: '/file/layUpload/' //接口url
                ,type: 'post' //默认post
            }
        });
                //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1');
        form.verify({
            content: function (value) {
                value = $.trim(layedit.getContent(index));
                if (value == "") return "请输入内容";
                layedit.sync(index);
            },
            replyContent: function (value) {
                if (value == "") return "请输入内容";
            }
        });
        // 监听回复提交
        form.on('submit(formReply)', function(data) {
            var li = $(data.elem).parents(" li");
            var index = layer.load(1);
            var url = '/message/add';
            $.ajax({
                type: "POST",
                url: url,
                data: data.field,
                success: function(response) {
                    layer.close(index);
                    if( response.message == '成功' ) {
                        var data = response.data;

                        var html = '<hr>' +
                            '<div class="comment-child">' +
                            '<a name="reply-'+data.messageList[0].id+'"></a>' +
                            '<img src="'+data.messageList[0].image+'" alt="'+data.messageList[0].image+'">' +
                            '<div class="info">' +
                            '<span class="username">'+data.messageList[0].name+'</span>' +
                            '<span style="padding-right:0;margin-left:-5px;"> 回复 </span>' +
                            '<span class="username">'+data.name+':</span>' +
                            '<span>'+data.messageList[0].content+'</span>' +
                            '</div>' +
                            '<p class="info">' +
                            '<span class="comment-time">'+data.messageList[0].createTime+'</span>' +
                            '<a href="javascript:;" class="btn-reply" data-target-id="'+data.messageList[0].id+'" data-target-name="'+data.messageList[0].name+'">回复</a>' +
                            '</p>' +
                            '</div>';

                        li.find(" textarea").val("");
                        li.find(" a:contains('收起')").click();

                        $(html).insertAfter($(li).find(".comment-parent"));

                        layer.msg("回复成功", {
                            icon: 1
                        });
                    } else {
                        layer.msg(response.message);
                    }
                },
                error: function(data) {
                    layer.close(index);
                    layer.msg("网络错误，请稍后尝试！");
                }
            });
            return false;
        });
        // 监听留言提交
        form.on('submit(formLeaveMessage)', function(data) {
            var index = layer.load(1);
            var url = '/message/add';
            $.ajax({
                type: "POST",
                url: url,
                data: data.field,
                success: function(response) {
                    layer.close(index);
                    if(response.message == '成功' ) {
                        var data = response.data;
                        var html = '<li>' +
                            '<div class="comment-parent">' +
                            '<a name="comment-'+data.id+'"></a>' +
                            '<img src="'+data.image+'" alt="'+data.name+'">' +
                            '<div class="info">' +
                            '<span class="username">'+data.name+'</span>' +
                            '</div>' +
                            '<div class="comment-content">'+data.content+'</div>' +
                            '<p class="info info-footer">' +
                            '<span class="comment-time">'+data.createTime+'</span>' +
                            '<a href="javascript:;" class="btn-reply" data-target-id="'+data.id+'" data-target-name="'+data.name+'">回复</a>' +
                            '</p>' +
                            '</div>' +
                            '<div class="replycontainer layui-hide">' +
                            '<form class="layui-form" action="">' +
                            '<input type="hidden" name="name" value="">' +
                            '<input type="hidden" name="image" value="">' +
                            '<input type="hidden" name="articleId" value="">' +
                            '<input type="hidden" name="type" value="1">' +
                            '<input type="hidden" name="parentId" value="">' +
                            '<div class="layui-form-item">' +
                            '<textarea name="content" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>' +
                            '</div>' +
                            '<div class="layui-form-item">' +
                            '<button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>' +
                            '</div>' +
                            '</form>' +
                            '</div>' +
                            '</li>';

                        $("#articleComments").prepend(html);
                        $('#remarkEditor').val('');

                        index = layedit.build('LAY_demo1', {
                            height: 150,
                            tool: ['face', '|', 'link'],
                        });

                        layer.msg("评论成功", {
                            icon: 1
                        });
                    } else {
                        layer.msg(response.message);
                    }
                },
                error: function(data) {
                    layer.close(index);
                    layer.msg('网络错误，请稍后尝试！');
                }
            });
            return false;
        });
        // 评论显示
        flow.load({
            elem: '#articleComments',
            isAuto : true,
            end : '没有更多了哦！╮(╯▽╰)╭',
            done: function(page, next){ //执行下一页的回调

                $.ajax({
                    url:'/blog/findMessage?page='+page,
                    type:'get',
                    success:function(res){
                        if( res.code == 200 )
                        {
                            var list = res.data.data;
                            var html = '';

                            $(list).each(function (k,v) {

                                html += '<li>' +
                                    '<div class="comment-parent">' +
                                    '<a name="comment-'+v.id+'"></a>' +
                                    '<img src="'+v.image+'" alt="'+v.image+'">' +
                                    '<div class="info"><span class="username">'+v.name+'</span></div>' +
                                    '<div class="comment-content">'+v.content+'</div>' +
                                    '<p class="info info-footer">' +
                                    '<span class="comment-time">'+v.createTime+'</span>' +
                                    '<a href="javascript:;" class="btn-reply" data-target-id="'+v.id+'" data-target-name="'+v.name+'">回复</a> ' +
                                    '</p>' +
                                    '</div>';

                                if ( JSON.stringify(v.messageList) !== null )
                                {
                                    $(v.messageList).each(function (key,val) {
                                        html += '<hr>' +
                                            '<div class="comment-child">' +
                                            '<a name="reply-'+val.id+'" alt="'+val.name+'"></a>' +
                                            '<img src="'+val.image+'">' +
                                            '<div class="info">' +
                                            '<span class="username">'+val.name+'</span>' +
                                            '<span style="padding-right:0;margin-left:-5px;"> 回复 </span>' +
                                            '<span class="username">'+v.name+':</span>' +
                                            '<span>'+val.content+'</span>' +
                                            '</div>' +
                                            '<p class="info">' +
                                            '<span class="comment-time">'+val.createTime+'</span>' +
                                            '<a href="javascript:;" class="btn-reply" data-target-id="'+val.id+'" data-target-name="'+val.name+'">回复</a>' +
                                            '</p>' +
                                            '</div>';
                                    });
                                }

                                html += '<div class="replycontainer layui-hide">' +
                                    '<form class="layui-form" action="">' +
                                    '<input type="hidden" name="name" value="">' +
                                    '<input type="hidden" name="image" value="">' +
                                    '<input type="hidden" name="articleId" value="">' +
                                    '<input type="hidden" name="type" value="2">' +
                                    '<input type="hidden" name="parentId" value="">' +
                                    // '<input type="hidden" name="parentId" value="'+v.id+'">' +
                                    '<div class="layui-form-item">' +
                                    '<textarea name="content" lay-verify="replyContent" id="remarkEditor" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>' +
                                    '</div>' +
                                    '<div class="layui-form-item">' +
                                    '<button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>' +
                                    '</div>' +
                                    '</form>' +
                                    '</div>' +
                                    '</li>';
                            });

                            next(html, page < res.data.totalPage);
                        }else{
                            layer.msg("查询失败",{icon:2,time:2000,shade:0.5});
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        layer.msg('网络错误，请稍后尝试！');
                    }
                });
            }
        });
        //回复按钮点击事件
        $('#articleComments').on('click', '.btn-reply', function () {
            if ([[${thirdLoginUser}]]==null){
                layer.msg("请先登录！",{icon: 6})
            }else {
                var oldName = $(this).data('target-name');
                var parentId = $(this).data('target-id');
                var targetName =$("#userNmame").val();
                var  targetImage =$("#avatar").val();
                var articleId = $("#articleId").val();
                $container = $(this).parent('p').parent().siblings('.replycontainer');
                if ($(this).text() == '回复') {
                    $container.find('textarea').attr('placeholder', '回复【' + oldName + '】');
                    $container.removeClass('layui-hide');
                    $container.find('input[name="name"]').val(targetName);
                    $container.find('input[name="image"]').val(targetImage);
                    $container.find('input[name="parentId"]').val(parentId);
                    $container.find('input[name="articleId"]').val(articleId);
                    $(this).parents('.articleComments li').find('.btn-reply').text('回复');
                    $(this).text('收起');
                } else {
                    $container.addClass('layui-hide');
                    $container.find('input[name="openid"]').val(0);
                    $container.find('input[name="reply_openid"]').val(0);
                    $(this).text('回复');
                }
            }
        });

    });
    var redirectUrl = window.location.href;

    function logins() {
        location.href = "/qq/auth?status=2&redirectUrl=" + redirectUrl;
    }

    function qqloginOut() {
        location.href = "/qqloginOut?redirectUrl=" + redirectUrl;
    }
</script>
</html>